<!-- 
  Scripted Forms - Making GUIs easy for everyone on your team.
  Copyright (C) 2017 Simon Biggs

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as published
  by the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version (the "AGPL-3.0+").

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  GNU Affero General Public License and the additional terms for more
  details.

  You should have received a copy of the GNU Affero General Public License
  along with this program. If not, see <http://www.gnu.org/licenses/>.

  ADDITIONAL TERMS are also included as allowed by Section 7 of the GNU
  Affrero General Public License. These aditional terms are Sections 1, 5,
  6, 7, 8, and 9 from the Apache License, Version 2.0 (the "Apache-2.0")
  where all references to the definition "License" are instead defined to
  mean the AGPL-3.0+.

  You should have received a copy of the Apache-2.0 along with this
  program. If not, see <http://www.apache.org/licenses/LICENSE-2.0>.
-->

<span #variablecontainer *ngIf="variableName === undefined">
  <ng-content></ng-content>
</span>

<variable-parameter #variableInputTypes *ngIf="inputTypes">{{inputTypes}}</variable-parameter>
<variable-parameter #variableDropdownItems *ngIf="dropdownItems">{{dropdownItems}}</variable-parameter>

<div class="container mat-elevation-z8 avoid-page-break">
  <mat-table #table [dataSource]="dataSource" *ngIf="variableValue">
    <ng-container [matColumnDef]="column" *ngFor="let column of columnDefs; let i = index">

      <mat-header-cell *matHeaderCellDef>
        {{column}}

        <ng-container *ngIf="typeEdit !== null">
          <mat-select *ngIf="column != variableValue.schema.primaryKey" [(ngModel)]="types[i]" (ngModelChange)="typesChanged()">
            <mat-option *ngFor="let type of availableTypes" [value]="type">
              {{type}}
            </mat-option>
          </mat-select>
        </ng-container>

      </mat-header-cell>

      <mat-cell *matCellDef="let row; let j = index">
        <ng-container *ngIf="column == variableValue.schema.primaryKey || isOutput">
          {{row[column]}}
        </ng-container>
        <ng-container *ngIf="column != variableValue.schema.primaryKey && !isOutput">
          <ng-container *ngIf="definedInputTypes[column] === undefined">
            
            <mat-form-field *ngIf="types[i] !== 'boolean'">
              <input
                [required]="required"
                matInput
                (blur)="onBlur([j, column])"
                (focus)="onFocus([j, column])"
                [disabled]="!isFormReady"
                [(ngModel)]="row[column]"
                (ngModelChange)="dataChanged()"
                (keyup)="dataChanged()"
                type="string">
            </mat-form-field>

            <mat-checkbox *ngIf="types[i] === 'boolean'" class="no-ripple-height"
              [(ngModel)]="row[column]"
              (ngModelChange)="dataChanged()"
              [disabled]="!isFormReady">
            </mat-checkbox>

          </ng-container>

          <!-- All defined input types given below here -->
          <ng-container *ngIf="definedInputTypes[column] !== undefined">
            <ng-container *ngIf="definedInputTypes[column] === 'string'">

              <mat-form-field>
                <input
                  matInput
                  (blur)="onBlur([j, column])"
                  (focus)="onFocus([j, column])"
                  [disabled]="!isFormReady"
                  [(ngModel)]="row[column]"
                  (ngModelChange)="dataChanged()"
                  (keyup)="dataChanged()"
                  type="string">
              </mat-form-field>

            </ng-container>

            <ng-container *ngIf="definedInputTypes[column] === 'number'">

                <mat-form-field>
                  <input
                    matInput
                    (blur)="onBlur([j, column])"
                    (focus)="onFocus([j, column])"
                    [disabled]="!isFormReady"
                    [(ngModel)]="row[column]"
                    (ngModelChange)="dataChanged()"
                    (keyup)="dataChanged()"
                    type="number">
                </mat-form-field>

            </ng-container>

            <ng-container *ngIf="definedInputTypes[column] === 'dropdown'">

              <mat-select
                (blur)="onBlur([j, column])"
                (focus)="onFocus([j, column])"
                [disabled]="!isFormReady"
                [(ngModel)]="row[column]"
                (ngModelChange)="dataChanged()">
                <ng-container *ngIf="definedDropdownItems[column]">
                  <ng-container *ngIf="definedDropdownItems[column][0]">
                    <mat-option *ngFor="let option of definedDropdownItems[column]" [value]="option">{{option}}</mat-option>
                  </ng-container>
                  <ng-container *ngIf="definedDropdownItems[column][tableIndex[j]]">
                    <mat-option *ngFor="let option of definedDropdownItems[column][tableIndex[j]]" [value]="option">{{option}}</mat-option>
                  </ng-container>
                </ng-container>

              </mat-select>

            </ng-container>

            <ng-container *ngIf="definedInputTypes[column] === 'tick'">

              <mat-checkbox class="no-ripple-height"
                [disabled]="!isFormReady"
                [(ngModel)]="row[column]"
                (ngModelChange)="dataChanged()">
              </mat-checkbox>

            </ng-container>
            
            <ng-container *ngIf="definedInputTypes[column] === 'toggle'">

              <mat-slide-toggle class="no-ripple-height"
                [disabled]="!isFormReady"
                [(ngModel)]="row[column]"
                (ngModelChange)="dataChanged()">
              </mat-slide-toggle>

            </ng-container>

            <ng-container *ngIf="definedInputTypes[column] === 'readonly'">

              {{row[column]}}

            </ng-container>

            <ng-container *ngIf="definedInputTypes[column] === 'slider'">

              Not implemented

            </ng-container>
            

          </ng-container>

        </ng-container>
      </mat-cell>

    </ng-container>
    <mat-header-row *matHeaderRowDef="columnDefs"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columnDefs;"></mat-row>
  </mat-table>
</div>
